<template>
  <div>
    <h2>商品列表</h2>
    
    <div class="box">
      <h3>商品 - MacBookPro</h3>
        <h5>价格 - 15999 </h5>
        
        <!-- 需求：将下面这一块按钮封装成一个小组件  -->
        <!-- 这里:count 可以改成 任意的，这是子组件中的props决定的 -->
        <number-box :value="count" @input="handleInput"></number-box>

        <!-- v-model  ==> :value + @input -->
        <number-box v-model="count"></number-box>
    </div>
  </div>
</template>

<script>
import NumberBox from './components/NumberBox.vue'
export default {
  components:{
    NumberBox
  },
  data(){
    return {
      count:10
    }
  },
  methods:{
    // 在父组件中，修改子组件穿过来的数据
    handleInput(val){
      this.count = val
    }
  }
}
</script>

<style scoped>
.box{
  border:1px solid skyblue;
  width: 200px;
  height: 200px;
  margin: 10px;
  padding: 10px;
}

</style>